<template>
	<view class="Content">
		<u-modal v-model="show" :show-cancel-button='true' @cancel="Back" @confirm="Next">
			<view class="slot-content" style="padding: 0 10px;">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-modal v-model="show2" :show-cancel-button='true' @cancel="Back2">
			<view class="slot-content" style="padding: 0 10px;">
				<rich-text :nodes="content2"></rich-text>
			</view>
		</u-modal>
		<u-navbar :is-back="false" title="首页" :titleBold="true"></u-navbar>
		<view class="ControlBox">
			<view class="StartPause" @click="StartPause()" v-if="TodayData==null">
				<view class="StartPauseContent" v-if="!Start">
					<u-icon color="#fff" name="play-right" size="20px"></u-icon>
					<view>开始</view>
				</view>
				<view class="Num u-line-1" v-if="Start">
					{{time}}
				</view>
			</view>
			<view class="StartPause" style="background-color: #19BE6B;" v-if="TodayData!=null">
				<view class="StartPauseContent">
					<view>今日已完成</view>
				</view>
			</view>
		</view>
		<view class="MessageBox">
			<view
				style="padding: 15px;margin-top: 20px;border-radius: 10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;">
				<view class="MessageBoxTitle">今日数据</view>
				<view v-if="TodayData==null">
					<view class="MessageBoxItemTitle">暂无信息</view>
				</view>
				<view v-else>
					<view class="MessageBoxItemTitle">用时：<text style="font-weight: bold;">{{TodayData.duration}}</text>
					</view>
					<view class="MessageBoxItemTitle">里程：<text style="font-weight: bold;">{{TodayData.mileage}}</text>
					</view>
					<view class="MessageBoxItemTitle">配速：<text style="font-weight: bold;">{{TodayData.speed}}</text>
					</view>
				</view>
			</view>
			<view
				style="padding: 15px;margin-top: 20px;border-radius: 10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;">
				<view class="MessageBoxTitle">上次数据</view>
				<view v-if="LastData==''">
					<view class="MessageBoxItemTitle">暂无信息</view>
				</view>
				<view v-else>
					<view class="MessageBoxItemTitle">用时：<text style="font-weight: bold;">{{LastData.duration}}</text>
					</view>
					<view class="MessageBoxItemTitle">里程：<text style="font-weight: bold;">{{LastData.mileage}}</text>
					</view>
					<view class="MessageBoxItemTitle">配速：<text style="font-weight: bold;">{{LastData.speed}}</text>
					</view>
				</view>
			</view>
			<view
				style="padding: 15px;margin-top: 20px;border-radius: 10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;">
				<view class="MessageBoxTitle">总里程</view>
				<view v-if="Km==''">
					<view class="MessageBoxItemTitle">暂无信息</view>
				</view>
				<view v-else>
					<view class="MessageBoxItemTitle"><text style="font-weight: bold;">{{Km}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				show2: false,
				content:`
					跑步规则：<br/><br/>
					1.男生跑步限速5—9（分钟/km)，女生限速6—10(分钟/km)<br/>
					2.跑步里程限制在1—5公里，超过5公里计5公里。<br/>
					3.每日跑步时间限制在6:30—23:30<br/>
					4.跑步范围在学校运动场(学校田径场)<br/>
					5.如果提交了一次有效的跑步记录，当日将不能再继续运动，每日只能提交一次有效记录。<br/><br/>
				`,
				content2: `
					注意事项：<br/><br/>
					1.跑步前，请注意身体状况，并做好热身运动<br/>
					2.开跑时，检查总计时间是否开始计时，如果时间停止可选择点暂停按钮，并停留10秒后再点继续。观察时间是否继续执行。<br/>
					3.时刻观察自己的运动里程，当里程数不正常时，可以放慢脚步，慢行观察。<br/>
					4.开始跑步时，需允许获取跑步地理位置，当误点不允许后退出重新开始 开启定位<br/>
					5.请勿持多个手机跑步，系统将自动识别，将视为无效数据<br/><br/>
				`,
				code: 0,
				Token: '',
				StuID: '',
				hours: 0,
				minute: 0,
				Start: false,
				time: 3,
				TodayData: '',
				LastData: '',
				Km: '',
				LastKm: '',
				titleStyle: {
					fontSize: '16px',
					color: '#606266',
				},

				labelStyleTwo: {
					fontSize: '16px',
					fontWeight: 'bold',
					padding: '10px 0',
					color: '#303133'
				},
				labelStyle: {
					fontSize: '32px',
					fontWeight: 'bold',
					padding: '10px 0',
					color: '#303133'
				},
				labelStyleThree: {
					fontSize: '16px',
					fontWeight: 'bold',
					color: '#303133'
				},
			}
		},
		onLoad() {

		},
		onShow() {
			let date = new Date()
			this.hours = date.getHours()
			this.minute = date.getMinutes()
			let value = uni.getStorageSync('UserMsg')
			if (!value) {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			} else {
				this.Token = value.Token
				this.StuID = value.StuID
				this.$u.post('/user/judge/token', {
					token: this.Token
				}).then(res => {
					console.log("token", res.statusCode)
					if (res.statusCode == 15) {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					} else {
						this.GetIndexData()
					}
				})
			}
		},
		methods: {
			Back: function(){
				uni.reLaunch({
					url:''
				})
			},
			Back2: function(){
				this.show2 = false
				this.show = true
			},
			Next: function(){
				this.show2 = true
			},
			CheckToken: function() {
				this.$u.post('/user/judge/token', {
					token: this.Token
				}).then(res => {
					this.code = res.statusCode
					// console.log(this.code)
				})
			},
			GetIndexData: function() {
				this.CheckToken()
				if (this.code == 0) {
					this.$u.post('/history/getsumdata', {
						number: this.StuID
					}).then(res => {
						console.log(res)
						this.Km = parseFloat(res.rst).toFixed(2)
					})
					var aData = new Date();
					let time = aData.getFullYear() + "-" + ((aData.getMonth() + 1) > 9 ? (aData.getMonth() + 1) : "0" +
						(aData.getMonth() + 1)) + "-" + (aData.getDate() > 9 ? aData.getDate() : "0" + aData
						.getDate());
					console.log(time)
					this.$u.post('/history/getTodyData', {
						id: this.StuID,
						time: time
					}).then(res => {
						if (res.statusCode == 12) {
							this.TodayData = ''
						} else {
							this.TodayData = res.rst
						}
						// console.log(this.TodayData)
					})
					this.$u.post('/history/getRecentData', {
						id: this.StuID
					}).then(res => {
						console.log("上次", res)
						if (res.statusCode == 12) {
							this.LastData = ''
						} else {
							this.LastData = res.rst
						}
					})
				} else {
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}
			},
			StartPause() {
				if (this.hours >= 6 && this.hours < 23) {
					if (this.hours == 6) {
						if (this.minute >= 30) {
							let _this = this
							this.Start = true
							this.timer = setInterval(() => {
								//创建定时器
								if (this.time === 1) {
									clearInterval(this.timer);
									this.timer = null;
									this.PageJump()
								} else {
									this.time--
								}
							}, 1000)
						} else {
							this.$u.toast('未到跑步时间!(6:30--23:00)');
						}
					} else {
						let _this = this
						this.Start = true
						this.timer = setInterval(() => {
							//创建定时器
							if (this.time === 1) {
								clearInterval(this.timer);
								this.timer = null;
								this.PageJump()
							} else {
								this.time--
							}
						}, 1000)
					}
				} else {
					this.$u.toast('未到跑步时间!(6:30--23:00)');
				}

			},
			PageJump() {
				uni.reLaunch({
					url: '/pages/sport/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ControlBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.StartPause {
		height: 100px;
		width: 100px;
		background-color: #2979FF;
		border-radius: 100%;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	}

	.StartPauseContent {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 16px;
		color: #fff;
		height: 100%;
		width: 100%
	}

	.StartPauseContent>view {
		margin: 5px 0;
	}

	.MessageBox {
		margin: 10px 0;
	}

	.Num {
		font-size: 40px;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.MessageBoxTitle {
		font-size: 20px;
		color: #303133;
	}

	.MessageBoxItemTitle {
		font-size: 16px;
		color: #303133;
		padding-top: 5px;
	}
</style>
